<template>
	<view class="cartWrap">
		<view v-if="cartList.length > 0">
			<u-swipe-action btn-width="180" :options="options" v-for="(item, index) in cartList"
				@click="removeCart(item.id)" :key="item.id">
				<view class="cartList u-flex u-p-30">
					<view class="check">
						<u-checkbox v-model="item.is_checked ? true : false" :name="item.id" :disabled="false"
							@change="checkChange" shape="circle("></u-checkbox>
					</view>
					<view class="cart u-flex u-flex-1">
						<view class="img" @tap="jump('pages/goods/show?id=' + item.goods.id)">
							<u-image width="200rpx" height="200rpx" :src="item.goods.cover_url"></u-image>
						</view>
						<view class="text">
							<view class="title u-m-b-10" @tap="jump('pages/goods/show?id=' + item.goods.id)">
								{{item.goods.title}}
							</view>
							<view class="info u-m-b-10">{{item.goods.description}}</view>
							<view class="editor u-flex u-row-between">
								<view class="price">￥ {{item.goods.price}}</view>
								<view class="num">
									<u-number-box v-model="item.num" @change="numChange"></u-number-box>
								</view>
								<u-icon name="trash" type="error" @tap="removeCart(item.id)"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</u-swipe-action>

			<view class="cartBtn u-p-30 u-flex u-row-between">
				<view class="checkall">
					<u-checkbox v-model="isAll" :disabled="false" @change="checkAll" shape="circle("></u-checkbox>
					<text>全选</text>
				</view>
				<view class="right u-flex">
					<view class="total u-m-r-40 u-col ">
						共 {{totalNum}} 元
					</view>
					<u-button type="error" size="medium" @click="toViewCart">去结算</u-button>
				</view>
			</view>

		</view>
		<!-- 空购物车 -->
		<view v-else class="u-flex u-row-center u-col-center" style="height: 60vh;">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartList: [],
				idArr: [],
				options: [{
					text: '移除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
			}
		},
		onShow() {
			this.getCart()
		},

		computed: {
			isAll: {
				get() {
					return this.cartList.every(item => {
						return item.is_checked
					})
				},
				set(val) {
					this.checkAll(val)
				}
			},
			totalNum() {
				return this.cartList.filter(e => {
					if (e.is_checked) return true
				}).reduce((pre, cur) => {
					return parseInt(pre + (cur.goods.price * cur.num))
				}, 0)
			}
		},
		methods: {
			/**
			 * 获取购物车数据
			 */
			async getCart() {
				const {
					data
				} = await this.$u.api.cartList({
					include: 'goods'
				})
				this.cartList = data
				console.log(data);
			},
			/**
			 * 数字增加减少
			 */
			numChange() {
				console.log('修改数字')
			},

			/**
			 * checkbox改变状态
			 */
			async checkChange(val) {
				const {
					value,
					name
				} = val;
				console.log(value, name)
				let idArr = []
				this.cartList.forEach(e => {
					if (e.is_checked) idArr.push(e.id)
				})
				if (value) {
					if (name) idArr.push(name);
				} else {
					idArr.splice(idArr.indexOf(name), 1);
				}
				await this.$u.api.changeCheck({
					cart_ids: idArr
				})
				this.getCart()
			},

			/**
			 * 全选
			 */
			async checkAll(val) {
				const {
					value
				} = val;
				let idArr = [];
				if (value) {
					this.cartList.forEach(e => {
						idArr.push(e.id);
					})
				};
				await this.$u.api.changeCheck({
					cart_ids: idArr
				});
				this.getCart()
			},
			/**
			 * 移除购物车
			 */
			async removeCart(id) {
				await this.$u.api.removeCart(id);
				this.getCart()
				// console.log('移除购物车', id)
			},

			/**
			 * 跳转到商品详情页
			 */
			jump(url) {
				this.$u.route(url);
			},
			toViewCart() {
				console.log('aaa')
				this.$u.route({
					url: 'pages/cart/view-cart',
					type: 'to'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.cartWrap {
		.cart {
			flex: 0 0 100%;
		}

		.total {
			color: $u-type-error;
			font-weight: bold;
		}
	}
</style>
